<template>
  <div class="bg-gray-50 min-h-screen">
    <!-- 顶部导航栏 -->
    <header class="bg-gradient-to-r from-teal-800 to-blue-900 text-white shadow-md">
      <div class="container mx-auto px-4 py-3 flex items-center justify-between">
        <div class="flex items-center space-x-6">
          <div class="font-['Pacifico'] text-2xl">logo</div>
          <nav class="hidden md:flex space-x-6">
            <router-link to="/jobs" class="text-white hover:text-teal-200 px-2 py-1 rounded transition">职位</router-link>
          </nav>
        </div>
        <div class="flex items-center space-x-4">
          <router-link to="/communication" class="text-white hover:text-teal-200">消息</router-link>
          <router-link to="/resume" class="text-white bg-primary bg-opacity-20 px-2 py-1 rounded hover:bg-opacity-30">简历</router-link>
          <div class="flex items-center space-x-2">
            <span>{{ authStore.user?.name }}</span>
            <div class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center overflow-hidden">
              <img :src="authStore.user?.avatar" :alt="authStore.user?.name" class="w-full h-full object-cover">
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="container mx-auto px-4 py-6">
      <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">我的简历</h1>
        <div class="flex space-x-3">
          <button @click="previewResume" class="px-4 py-2 bg-white border border-gray-300 rounded text-gray-700 hover:bg-gray-50 flex items-center">
            <i class="ri-eye-line mr-1"></i>
            预览
          </button>
          <button @click="downloadResume" class="px-4 py-2 bg-white border border-gray-300 rounded text-gray-700 hover:bg-gray-50 flex items-center">
            <i class="ri-download-line mr-1"></i>
            下载
          </button>
          <button @click="shareResume" class="px-4 py-2 bg-white border border-gray-300 rounded text-gray-700 hover:bg-gray-50 flex items-center">
            <i class="ri-share-line mr-1"></i>
            分享
          </button>
          <button @click="editMode = !editMode" class="px-4 py-2 bg-primary text-white rounded hover:bg-primary/90 flex items-center">
            <i class="ri-file-edit-line mr-1"></i>
            {{ editMode ? '保存' : '编辑' }}
          </button>
        </div>
      </div>

      <div class="flex gap-6">
        <!-- 左侧简历内容 -->
        <div class="w-2/3">
          <ResumeBasicInfo :edit-mode="editMode" />
          <ResumeEducation :edit-mode="editMode" />
          <ResumeExperience :edit-mode="editMode" />
          <ResumeProjects :edit-mode="editMode" />
          <ResumeSkills :edit-mode="editMode" />
          <ResumeCertificates :edit-mode="editMode" />
        </div>

        <!-- 右侧功能区 -->
        <div class="w-1/3 space-y-6">
          <ResumeUpload />
          <ResumeCompleteness />
          <ResumePrivacy />
          <ResumeAIAssistant @optimize="handleAIOptimize" />
        </div>
      </div>
    </main>

    <!-- 预览模态框 -->
    <ResumePreviewModal v-if="showPreview" @close="showPreview = false" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useAuthStore } from '../stores/auth'
import ResumeBasicInfo from '../components/ResumeBasicInfo.vue'
import ResumeEducation from '../components/ResumeEducation.vue'
import ResumeExperience from '../components/ResumeExperience.vue'
import ResumeProjects from '../components/ResumeProjects.vue'
import ResumeSkills from '../components/ResumeSkills.vue'
import ResumeCertificates from '../components/ResumeCertificates.vue'
import ResumeUpload from '../components/ResumeUpload.vue'
import ResumeCompleteness from '../components/ResumeCompleteness.vue'
import ResumePrivacy from '../components/ResumePrivacy.vue'
import ResumeAIAssistant from '../components/ResumeAIAssistant.vue'
import ResumePreviewModal from '../components/ResumePreviewModal.vue'

const authStore = useAuthStore()

const editMode = ref(false)
const showPreview = ref(false)

const previewResume = () => {
  showPreview.value = true
}

const downloadResume = () => {
  alert('简历下载中...')
  setTimeout(() => {
    alert('简历下载完成！')
  }, 1500)
}

const shareResume = () => {
  alert('简历分享链接已复制到剪贴板')
}

const handleAIOptimize = () => {
  alert('AI优化功能启动中...')
}
</script>
